<template>
  <div id="idea-container">
    <!--  头部  -->
    <div class="container middle">
      <div class="page-body" :class="{mt40: isfromLaywer}">
        <el-tabs v-model="activeName">
          <el-tab-pane label="待服务" name="waiting"></el-tab-pane>
          <el-tab-pane label="已完成" name="completed"></el-tab-pane>
        </el-tabs>
        <div class="list-box" style="margin-top: 30px">
          <!--  成功背景色 #D4E3F4    -->
          <div class="list-item" v-for="item in 10" :key="item">
            <div class="item-info" :style="{background: item % 4 === 1 ? '#D4E3F4' : '#fff'}"
                 style="display: flex;align-items: center;justify-content: space-between;padding: 25px;border-radius: 4px;border: 1px solid #E9EEEC">
              <div class="list-item-left" style="display:flex;align-items: flex-start">
                <div class="icon">
                  <img v-if="item % 4 === 1" style="width: 28px;height: 28px" src="~@/assets/img/center/faq-compeled@2x.png" alt="">
                  <img v-else style="width: 28px;height: 28px" src="~@/assets/img/center/faq@2x.png" alt="">
                </div>
                <div class="conn" style="flex: 1;padding-left: 20px">
                  <div class="conn-title" style="font-size: 22px;color: #333">人民法院如何受理因强制执行被确认违法而申请的国家赔偿？</div>
                  <div class="conn-detail" style="margin-top: 10px;display: flex;align-items: center;color: #999999">
                    <div class="laywer">费用：1000元    张律师</div>
                    <div class="conn-sn" style="margin-left: 30px">单号：65as7d16465a6sd4a</div>
                  </div>
                </div>
              </div>
              <div class="list-item-right">
                <div v-if="activeName === 'waiting'">
                  <el-button round style="margin-right: 12px" @click="dialogVisible = true">立即回答</el-button>
                  <span class="confirm" style="font-size: 15px;color: #3B8FEE">确认完成</span>
                </div>
                <div v-else>
                  <img v-if="item === 1" style="width: 15px;height: 8px" src="~@/assets/img/center/arrow-up@2x.png" alt="">
                  <img v-else style="width: 15px;height: 8px" src="~@/assets/img/center/arrow-down@2x.png" alt="">
                </div>
              </div>
            </div>
            <div class="item-detail" v-if=" item === 1 "
                 style="background: #EBF1F8;padding: 20px 35px;">
              <!--   这里后面应该是html内容吧  -->
              <p>1、起诉，即向有管辖权的法院立案庭递交诉状。</p>
              <p>2、立案审查 符合立案条件，通知当事人7日内交诉讼费，交费后予以立案;不符合立案条件，裁定不予受理。 如果对裁定驳回起诉不服，10日内向上级人
                民法院提出上诉。 受理后，法院5日内将起诉状副本送达对方当事人，对方当事人15日内进行答辩。</p>
              <p>3、排期开庭 提前3日通知当事人开庭时间、地点、承办人;公开审理的案件提前3日进行公告。</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      title="请回答问题！"
      :visible.sync="dialogVisible">
      <el-input type="textarea" v-model="response.html"></el-input>
      <el-button style="margin-top: 15px" type="primary" >确认提交</el-button>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "GoldenIdea",
  props: {
    isfromLaywer: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      activeName: 'waiting', // waiting completed
      dialogVisible: false,
      response: {
        html: ''
      }
    }
  },
  created(){
    this.getDataList()
  },
  methods: {

    getDataList(){
      let obj = Object.assign({})
      this.$util.post('api/service/getServiceList',obj).then(res=>{
        console.log(res)
      })
    }
  }
}
</script>

<style scoped>
.mt40 {
  margin-top: 40px;
}
</style>
